<template>
  <LyTable 
    :data="tableData" 
    :options="options"
    editIcon="EditPen"
    v-model:editRowIndex="editRowIndex"
    isEditRow>
    <!-- 自定义列 -->
    <template #date="{scope}">
      <el-icon-alarm-clock/>
      {{ scope.row.date }}
    </template>

    <!-- 操作列 -->
    <template #action="{scope}">
      <el-button type="primary" @click="editRow(scope)">编辑</el-button>
      <el-button type="danger" @click="deleteRow(scope)">删除</el-button>
    </template>

    <!-- 编辑状态下的操作列 -->
    <!-- <template #editRow="{scope}">
      <el-button type="primary" @click="editRow(scope)">保存</el-button>
      <el-button @click="deleteRow(scope)">取消</el-button>
    </template> -->

    <!-- 单元格编辑操作按钮 -->
    <!-- <template #editCell="{scope}" >
      <div class="edit-wrap">
        <el-button size="small" type="primary" @click="confirm(scope)">确认</el-button>
        <el-button size="small" @click="cancel(scope)">取消</el-button>
      </div>
    </template> -->
  </LyTable>
</template>

<script lang='ts' setup>
import { ref } from 'vue'
import { TableOptions } from '../../components/table/src/types'

interface TableData {
  date: string,
  name: string,
  address: string
}
let tableData = ref<TableData[]>([])
setTimeout(() => {
  // 表格数据
  tableData.value = [
    {
      date: '2016-05-03',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
    },
    {
      date: '2016-05-02',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
    },
    {
      date: '2016-05-04',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
    },
    {
      date: '2016-05-01',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
    },
  ]
}, 1000);

// 表格配置
let options: TableOptions[] = [
  {
    label: '日期',
    prop: 'date',
    align: 'center',
    slot: 'date'  // 自定义列
  },
  {
    label: '姓名',
    prop: 'name',
    align: 'center',
    editable: true  // 可编辑列
  },
  {
    label: '地址',
    prop: 'address',
    align: 'center'
  },
  {
    label: '操作',
    align: 'center',
    action: true  // 操作列
  }
]

let deleteRow = (scope: any) => {
  tableData.value.splice(scope.index, 1)
}

// 取消编辑结果
let cancel = (scope: any) => {
  // console.log('scope', scope);
}

// 当前编辑行
let editRowIndex = ref<Boolean>(false)
// 点击编辑行
let editRow = (scope: any) => {
  editRowIndex.value = true
}
</script>

<style lang='scss' scoped>
.edit-wrap {
  width: 250px;
  margin-top: 3px;
}
</style>